<template>
  <div class="paramsManangement">
    <MetaSearchForm @on-search="tableSearch">
      <el-form ref="paramsManangement_form" :model="searchData" label-width="80px" class="paramsManangement_searchFrom">
        <el-form-item label="参数名称" class="paramsManangement_searchFromItem">
          <el-input v-model="searchData.paramname" placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-form>
    </MetaSearchForm>
    <MetaPageTable
      ref="paramsManangementTable"
      class="paramsManangement_table"
      table-title="数据列表"
      :is-auto-req="true"
      :req-url="reqUrl"
      :req-data="searchDataForTable"
      req-method="post"
      :display-item="displayItem"
      :btn-group="btnGroup"
      :line-btn-group="lineBtnGroup"
      @btnClick="tableBtnClick"
      @lineBtnClick="tableInlineBtnClick"
    />
    <el-dialog
      v-if="paramOptionDialogFlag"
      :title="itemEditData.id && itemEditData.id !== '' ? '编辑参数' : '新建参数'"
      :visible.sync="paramOptionDialogFlag"
      width="60%"
      modal
      center
      :close-on-click-modal="false"
      :close-on-press-escape="false">
      <el-form ref="paramEdit_form" :model="itemEditData" label-width="150px" :rules="editRules">
        <el-form-item label="参数key" prop="paramkey">
          <el-input v-model="itemEditData.paramkey" placeholder="请输入参数key"></el-input>
        </el-form-item>
        <el-form-item label="参数名称" prop="paramname">
          <el-input v-model="itemEditData.paramname" placeholder="请输入参数名称"></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="参数类型">
              <el-select v-model="itemEditData.paramtype" placeholder="请选择参数类型">
                <el-option label="水质指标" :value="0"></el-option>
                <el-option label="其他指标" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位">
              <el-input v-model="itemEditData.unit" placeholder="请输入单位"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="参数下限">
              <el-input-number v-model="itemEditData.paramdown" :min="0" placeholder="请输入参数下限"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="参数上限">
              <el-input-number v-model="itemEditData.paramup" :min="0" placeholder="请输入参数上限"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="小数位数">
              <el-input-number v-model="itemEditData.reserved" :min="0" :max="10" placeholder="请输入小数位数"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="顺序">
              <el-input-number v-model="itemEditData.sort" :min="0" placeholder="请输入顺序"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="dialogFooter">
        <el-button size="mini" @click="editDialogClose()">取消</el-button>
        <el-button
          type="primary"
          size="mini"
          @click="editDialogSubmit()"
        >保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import MetaPageTable from '../components/MetaPageTable'
import MetaSearchForm from '../components/MetaSearchForm'
import deepClone from '../utils/deepClone'
export default {
  name: 'paramsManangement',
  components: {
    MetaPageTable,
    MetaSearchForm
  },
  data () {
    let checkKey = (rule, value, callback) => {
      if (value.trim() === '') {
        return callback(new Error('请输入参数key'))
      }else{
        return callback()
      }
    }
    let checkName = (rule, value, callback) => {
      if (value.trim() === '') {
        return callback(new Error('请输入参数名称'))
      }else{
        return callback()
      }
    }
    return {
      paramOptionDialogFlag: false,
      reqUrl: process.env.PROGOO_GATE_WATER + 'admin/paramThreshold',
      itemEditData: {
        id: '',
        paramkey: '',
        paramname: '',
        reserved: '',
        unit: '',
        paramup: '',
        paramdown: '',
        sort: 0,
        paramtype: 0
      },
      searchData: {
        paramname: '',
      },
      searchDataForTable: {},
      editRules: {
        paramkey: [
          { required: true, validator: checkKey, trigger: 'blur' },
        ],
        paramname: [
          { required: true, validator: checkName, trigger: 'blur' },
        ]
      },
      displayItem: [
        {
          label: '参数key',
          prop: 'paramkey'
        },
        {
          label: '参数名称',
          prop: 'paramname'
        },
        {
          label: '参数类型',
          prop: 'paramtype',
          type: 'if',
          format: {
            0: '水质指标',
            1: '其他指标'
          },
          color: {
            0: '#39B7F8',
            1: 'Orange'
          }
        },
        {
          label: '小数位数',
          prop: 'reserved'
        },
        {
          label: '单位',
          prop: 'unit'
        },
        {
          label: '参数下限',
          prop: 'paramdown'
        },
        {
          label: '参数上限',
          prop: 'paramup'
        },
        {
          label: '顺序',
          prop: 'sort'
        }
      ],
      btnGroup: [
        {
          id: 'add',
          title: '新建'
        }
      ],
      projectList: [],
      equipmentList: [],
      pointRules: {
        coordinatex: [
          { required: true, message: '请输入坐标x', trigger: 'blur' }
        ],
        coordinatey: [
          { required: true, message: '请输入坐标y', trigger: 'blur' }
        ],
        height: [
          { required: true, message: '请输入高程', trigger: 'blur' }
        ]
      },
      tableStyle: {
        fieldName: 'status',
        fieldValue: '1',
        backgroundColor: '#ffe3e3',
        fontColor: ''
      },
      lineBtnGroup: [
        {
          id: 'edit',
          title: '编辑',
        },
        {
          id: 'delete',
          title: '删除'
        }
      ],
    }
  },
  mounted() {
  },
  methods: {
    tableBtnClick(item) {
      if (item.button === 'add') {
        this.itemEditData = {
          id: '',
          paramkey: '',
          paramname: '',
          reserved: '',
          unit: '',
          paramup: '',
          paramdown: '',
          sort: 0,
          paramtype: 0
        }
        this.paramOptionDialogFlag = true
      }
    },
    tableInlineBtnClick(item) {
      if (item.button === 'edit') {
        this.itemEditData = deepClone(item.rows)
        this.paramOptionDialogFlag = true
      }else if (item.button === 'delete') {
        this.$confirm('确认删除此参数?', '参数删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$fetch({
            url: process.env.PROGOO_GATE_WATER + "admin/paramThreshold/delete",
            method: "post",
            data: {
              id: item.rows.id,
            }
          }).then(res => {
            if (res.data.code === 200) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.$nextTick(() => {
                this.$refs.paramsManangementTable.formDataInit(true)
              })
            }else {
              this.$notify.error({
                title: '错误',
                message: res.data.message
              });
            }
          })
        })
      }
    },
    tableSearch() {
      let param = {}
      for(let key in this.searchData) {
        if(key === 'dateBetween') {
          param.datestart = this.searchData[key] && this.searchData[key].length > 0 ? this.searchData[key][0] + ' 00:00:00' : ''
          param.dateend =  this.searchData[key] && this.searchData[key].length > 0 ? this.searchData[key][1] + ' 23:59:59' : ''
        }else {
          param[key] = this.searchData[key]
        }
      }
      this.searchDataForTable = param
      this.$nextTick(() => {
        this.$refs.paramsManangementTable.formDataInit(true)
      })

    },
    editDialogSubmit() {
      this.$refs['paramEdit_form'].validate((valid) => {
        if (valid) {
          let params = {}
          if(this.itemEditData.id !== '') {
            params.id = this.itemEditData.id
          }
          params.paramkey = this.itemEditData.paramkey.trim()
          params.paramname = this.itemEditData.paramname.trim()
          params.reserved = this.itemEditData.reserved
          params.unit = this.itemEditData.unit
          params.latitude = this.itemEditData.latitude
          params.paramup = this.itemEditData.paramup
          params.paramdown = this.itemEditData.paramdown
          params.province = this.itemEditData.province
          params.sort = this.itemEditData.sort
          params.paramtype = this.itemEditData.paramtype
          this.$fetch({
            url: process.env.PROGOO_GATE_WATER + "admin/paramThreshold/edit",
            method: "post",
            data: params
          }).then(res => {
            if (res.data.code === 200) {
              this.editDialogClose()
              this.$nextTick(() => {
                this.$refs.paramsManangementTable.formDataInit()
              })
            }else {
              this.$notify.error({
                title: '错误',
                message: res.data.message
              });
            }
          })
        } else {
          return false;
        }
      });
    },
    editDialogClose() {
      this.itemEditData = {
        id: '',
        paramkey: '',
        paramname: '',
        reserved: '',
        unit: '',
        paramup: '',
        paramdown: '',
        sort: 0,
        paramtype: 0
      }
      this.paramOptionDialogFlag = false
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.paramsManangement{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 15px;
  overflow-y: scroll;
  .paramsManangement_table {
    width: 100%;
    overflow-y: unset;
  }
  .dataDetailsForm_item {
    line-height: normal;
    padding: 8px 0;
  }
  .paramsManangement_searchFrom {
    width: 100%;
  }
  .paramsManangement_searchFromItem {
    float: left;
  }
  .dialogFooter {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
  }
}
</style>
